Visual editor for designing augmented-reality effects and configuring rendering parameters

ABSTRACT

In one embodiment, a method for designing an augmented-reality effect may include associating, by a computing device, a first visual object with a first rendering order specified by a user. A second visual object may be associated with a second rendering order specified by the user. The first and second visual objects may be defined in a three-dimensional space. Information associated with the first visual object, the first rendering order, the second visual object, and the second rendering order may be stored in one or more files. The one or more files may be configured to cause the first visual object and the second visual object to be rendered sequentially in an order determined based on the first rendering order and the second rendering order. The first visual object and the second visual object may be rendered to generate a scene in the three-dimensional space.

TECHNICAL FIELD

This disclosure generally relates to an editor for designingcomputer-generated effects.

BACKGROUND

Augmented reality provides a view of the real or physical world withadded computer-generated sensory inputs (e.g., visual, audible). Inother words, computer-generated or virtual effects augment or supplementthe real-world view. For example, a mobile phone with a camera maycapture a real-world scene and display a composite of the captured scenewith computer-generated objects. The visual objects may be, for example,two-dimensional and/or three-dimensional objects.

The conventional process for designing an augmented reality effect maybe time consuming and labor-intensive. An augmented reality design, at ahigh level, comprises art work to be displayed (e.g., drawings orcomputer-rendered objects) and software instructions for controlling howthe art work would appear in the augmented-reality scene. The designprocess for an augmented-reality effect typically requires severaliterations of designing and modifying the art work and the softwareinstructions in order to fine tune the desired effect. The process maybe further complicated since the artist and programmer are usuallydifferent persons. Thus, a typical design flow may require, e.g.,designing an art work by an artist, integrating the art work into aneffect by a programmer, assessing the result, having the artist and/orthe programmer refine the art work and/or the software instructions, andrepeating until the desired augmented-reality effect is achieved.

In operation, after an augmented-reality effect has been designed,objects appearing in the effect may be rendered by end-user devices(e.g., smart phone, tablet, laptop, desktop, etc.). The objects, whichmay be defined in three-dimensional space, may be processed or renderedone by one. Typically, the rendering order may be based on the objects'distance from the viewer or the display region. For example, if a sceneon Mars includes a red filter, smoke, and an astronaut placed in thatorder in three-dimensional space from the viewer, the three objects maybe rendered in that same sequence (e.g., closer objects may be renderedfirst).

Augmented-reality effects may be displayed through a variety of devices.For example, augmented-reality effects may be displayed on a user'smobile phone, tablet, laptop, computer monitor, television, or any otherdisplay devices. However, different display devices may have differentaspect ratios, resolution, display orientations, and/or other displayfeatures. Even if an augmented-reality effect is displayed as desired onone device in a particular viewing mode, it may not display as desiredon a different device or in a different viewing mode.

SUMMARY OF PARTICULAR EMBODIMENTS

Particular embodiments of the subject matter disclosed herein relates toan augmented-reality design editor (hereinafter “Editor”) that providesan environment where composition of art work and effects may be designedand displayed dynamically in real-time, thereby enabling a designer toquickly fine tune, adjust, and test augmented-reality effects. Forexample, the Editor may provide various features allowing a designer toimport an artistic object, incorporate the object into anaugmented-reality effect, and make adjustments to the object and/oraugmented-reality effect. In particular embodiments, the Editor mayprovide the designer with real-time visual feedback of the current stateof the design during the design process.

In particular embodiments, the Editor may provide an intuitive yetpowerful user interface for allowing a designer to specify how objectscaling should occur when dimensions of the display canvas change (e.g.,such as when a device switches from portrait view to landscape view).For example, the designer may specify scaling parameters for objects,such as designating a reference point (e.g., an anchor, a pivot point,and a scaling point) for scaling operations (e.g., positioning,rotation, and scaling). As another example, the designer may alsodesignate certain scaling parameters as being responsive for fixed. Forinstance, responsive dimensions of an object may adjust based on thedimensions of the display region, and fixed dimensions may remain thesame regardless of the dimensions of the display region.

In particular embodiments, the Editor may provide configuration optionsfor designers to control how objects are to be rendered in operation. Inparticular embodiments, the relative rendering order of each object maybe individually specified, regardless of the positions of the objectsrelative to each other in the three-dimensional space. In particularembodiments, the Editor may provide a user interface allowing designersto specify whether an object is: opaque, transparent/translucent, anoverlay, or a cutout. Based on the selected property, the Editor mayautomatically specify how the corresponding object should be rendered inoperation with respect to depth-buffer access.

The embodiments disclosed herein only examples, and the scope of thisdisclosure is not limited to them. Particular embodiments may includeall, some, or none of the components, elements, features, functions,operations, or steps of the embodiments disclosed above. Embodimentsaccording to the invention are in particular disclosed in the attachedclaims directed to a method, a storage medium, a system and a computerprogram product, wherein any feature mentioned in one claim category,e.g. method, can be claimed in another claim category, e.g. system, aswell. The dependencies or references back in the attached claims arechosen for formal reasons only. However any subject matter resultingfrom a deliberate reference back to any previous claims (in particularmultiple dependencies) can be claimed as well, so that any combinationof claims and the features thereof are disclosed and can be claimedregardless of the dependencies chosen in the attached claims. Thesubject-matter which can be claimed comprises not only the combinationsof features as set out in the attached claims but also any othercombination of features in the claims, wherein each feature mentioned inthe claims can be combined with any other feature or combination ofother features in the claims. Furthermore, any of the embodiments andfeatures described or depicted herein can be claimed in a separate claimand/or in any combination with any embodiment or feature described ordepicted herein or with any of the features of the attached claims.

BRIEF DESCRIPTION OF THE DRAWINGS

FIGS. 1A-1B illustrate an example user interface of an augmented-realitydesign editor.

FIG. 2 illustrates an example method for designing an augmented-realityeffect using an augmented-reality design editor.

FIGS. 3A-3D illustrate example scaling configurations for an object.

FIG. 4 illustrates an example method for specifying scalingconfigurations for an object using an augmented-reality design editor.

FIG. 5A illustrates an example of a conceptual relationship between adisplay region, a three-dimensional space displayed through the displayregion, and a viewer.

FIGS. 5B and 5C illustrate example user interfaces for concurrentlyshowing how objects may appear in three-dimensional space and in atwo-dimensional display region.

FIG. 6 illustrates an example user interface for controlling therendering order of objects.

FIGS. 7A-7B illustrate an example of an object having an opaqueproperty.

FIGS. 8A-8B illustrate an example of an object having atransparent/translucent property.

FIGS. 9A-9B illustrate an example of an object having an overlayproperty.

FIGS. 10A-10B illustrate an example of an object having a cutoutproperty.

FIG. 11 illustrates an example method for controlling how objects arerendered using an augmented-reality design editor.

FIG. 12 illustrates an example network environment associated with asocial-networking system.

FIG. 13 illustrates an example computer system.

DESCRIPTION OF EXAMPLE EMBODIMENTS

Particular embodiments disclosed herein provide an augmented-realitydesign editor (hereinafter “Editor”) for designing augmented-realityeffects. In particular embodiments, the Editor may be a composition andintegration tool through which objects may be visually incorporated intoan augmented-reality effect and modified based on real-time feedback ofthe current state of the design. In particular embodiments, the Editorprovides a graphical user interface that allows visual editing of theobjects and effects in the design.

In particular embodiments, trackers may be added to an augmented-realitydesign using the Editor. In particular embodiments, a tracker may be asoftware-implemented tool that may be used in an augmented-realitydesign to track particular objects and/or motions appearing in a videoscene. The Editor may support different types of trackers, such astrackers for a person's face, body, head, hand, expression, andgestures, as well as trackers for other types of animals (e.g., dogs,cats) and objects (e.g., cars, background, wall). The example shown inFIG. 1A utilizes a face tracker 120.

In particular embodiments, the user may add a tracker to anaugmented-reality design by, e.g., selecting the desired type oftracker, dragging-and-dropping a tracker onto an object (e.g., aperson's face 110) shown in the video 100, or through any other suitableuser-input interface. In particular embodiments, based on the type oftracker selected, the Editor may monitor the video for the type ofobject that the tracker is configured to track (e.g., face, hand, etc.).For example, a 64-point facial rig may be used to detect and track aperson's face. In particular embodiments, for each tracker added to thedesign, the Editor may monitor the entire video display or a region ofthe video display for the target object. In particular embodiments, upondetecting such an object, the Editor may associate the appropriatetracker with the object to track that object's movements. In particularembodiments, a tracker may tracker any feature(s) of an object, such asmovement, position, orientation, color, shape, pattern, etc. Inparticular embodiments, a tracker may have a fixed position within thevideo display (e.g., at particular x-y coordinates). As another example,a tracker's position and/or orientation within the video display may bedefined relative to the tracked object. For instance, the tracker'sposition may overlap or coincide with the tracked object and itsorientation may mimic that of the tracked object. As another example, atracker may be positioned n pixels (or other distance measures) from thecenter of the tracked object and its instantaneous position and/ororientation may depend on the orientation of the tracked object (e.g.,if the user is looking up, the tracker may be positioned n pixels abovethe user's face; if the user is looking forward, the tracker may bepositioned n pixels in front of the user's face). This relative positionmay be maintained as the object moves (e.g., changes position and/ororientation). In particular embodiments, the relative position of atracker may be defined by the user through a drag-and-drop mechanismusing the object shown in the video as the reference point. Inparticular embodiments, a tracker may also be associated with anothertracker. For example, a first face tracker may be positioned n pixels tothe left of a person's face, and a second tracker may be positioned mpixels above the first tracker. In particular embodiments, any number oftrackers may be added to an augmented-reality design, any number oftrackers may be associated with an object, and any number of trackersmay be associated with another tracker.

In particular embodiments, a tracker may be displayed in the video toprovide visual cues as to the position and orientation of the tracker.For example, a tracker may be displayed as a facial mesh or mask, athree-dimensional Cartesian axis (e.g., the tracker 120 shown in FIGS.1A and 1B), or any other suitable visual representations. The displayedtracker may move according to movements of the tracked object. Forexample, as the tracked object changes position and/or orientation, thedisplayed tracker may change position and/or orientation accordingly(e.g., following the user's face or maintaining a defined relativeposition; rotating to reflect the orientation of the tracked object,etc.). In the illustrated examples in FIGS. 1A and 1B, the tracker 120changes its position and orientation according to the changedposition/orientation of the person's face 110. In particularembodiments, a display of the tracker may be added to the video inreal-time while the video is being displayed. In particular embodiments,the displayed tracker may also be a user interface for changing theposition, orientation, and other properties of the tracker and/or anyassociated objects. For example, the user may drag-and-drop a tracker(e.g., displayed as a three-dimensional Cartesian axis) to adjust theposition and/or orientation of the tracker or any associated objectsthat are defined relative to the tracker.

In particular embodiments, the user may also add any number of objectsto the augmented-reality design in real-time while the video is beingdisplayed. In the illustrated examples shown in FIGS. 1A and 1B, theobject 130 is a three-dimensional cube. In particular embodiments, theuser may import an object definition (e.g., an image file, a 3D objectmodel, etc.) into the Editor (e.g., from a file, server, anotherapplication, etc.). For example, an object may be a 2D image, a 3Dobject, a mask, a mesh, a plane, a line, a null object (e.g., onlydisplayed during the design but not in the final product), or any othervisual artifacts. While certain objects may be predefined, others may bedynamically generated based on detected features of the video. Forexample, a facial mask or mesh may be dynamically generated based oninformation from a 64-point facial rig so that its size, shape, and/orcontour may match that of the detected face. In particular embodiments,the user may select any available object and add it to theaugmented-reality design using any suitable user-input interface (e.g.,through a menu selection, dragging-and-dropping, etc.). In particularembodiments, the selected object may be rendered and displayed in thevideo in real-time as the video is being played.

In particular embodiments, the user may associate any number of objectswith one or more trackers. For example, in FIGS. 1A and 1B, the object130 is associated with the tracker 120. In particular embodiments, theEditor may display the selected object in the video in real-time whilethe video is being displayed. In particular embodiments, the object maymove within the video according to the movements of the associatedtracker. For example, as the tracker changes position and/or orientation(as a result of movements by the tracked object), the associated objectmay change position and/or orientation accordingly. In particularembodiments, an object may be attached to a tracker such that theobject's position and/or orientation coincides with that of the tracker.For example, a facial mask may follow a user's face based on a facialtracker so that the facial mask appears to be worn by the user. Inparticular embodiments, an object may have a defined position and/ororientation relative to the associated tracker. For example, FIGS. 1Aand 1B show the object 130 maintaining a distance and orientationrelative to the tracker 120. In particular embodiments, an object mayalso be an animation, which may be triggered by certain triggeringevents detected by an associated tracker. For example, a facial maskobject may blink and open its mouth upon the tracker detectingcorresponding facial movements by the tracked faced. As another example,augmented tears may be shown flowing out of the user's eyes upondetection of the user making a sad face (e.g., based on detection of afrown or downwardly-curled lips). As yet another example, an object mayhave a defined movement pattern, such as a ball orbiting around theassociated tracker.

In particular embodiments, the Editor may provide various options forediting the augmented-reality design in real time. In particularembodiments, an object may be adjusted directly through the Editor'suser interface while it is being displayed in the video. For example,the Editor may allow an object's size, aspect ratio, orientation,position, behavior and other features to be viewed and adjusted. Forinstance, the user may use a drag-and-drop mechanism to visually adjustan object's size, position, or orientation. Since the object is beingdisplayed while adjustments are made, the designer is provided withconstant real-time feedback of how the object appears. In particularembodiments, the Editor may also provide designers the option to editcode associated with behaviors of augmented-reality effects. Forexample, the Editor may provide a panel through which code (e.g.,JavaScript) governing the behavior of effects may be edited. Inparticular embodiments, code may be edited while the video andassociated trackers and objects are being displayed. Once the code hasbeen updated, the user may apply the changes and immediately see how theaugmented-reality behaves as a result. In particular embodiments, theEditor may also provide various predefined effect options, such asdifferent types of transition between frames, tracker templates withpredetermined positions (e.g., two face trackers with preconfiguredpositions), interactivity between objects and trackers (e.g., certainpredefined facial expressions may trigger certain effects), amongothers.

Particular embodiments of the Editor described above provide severalbenefits. For example, by decoupling the definition and functionality oftrackers and objects, the Editor provides an intuitive and flexibledesign methodology that allows augmented-reality effects to be visuallydesigned separately (if desired) from the art work used in the effects.This in turn simplifies the design process and allows a designer (e.g.,a programmer or artist) to independently refine the augmented-realitydesign. Further, by providing real-time feedback of any modifications,the Editor streamlines the design process since the designer can see andadjust the augmented-reality effect as it is being designed, rather thanhaving to predict how a change would affect the design and separatelyperform tests to determine whether the modifications have the desiredresult.

FIG. 2 illustrates an example method 200 for designing anaugmented-reality effect using an augmented-reality design editor. Inparticular embodiments, the method may begin at step 210, where theeditor may display a video within a user interface. The video maycomprise an object, such as a person's face or head. The video may bedisplayed in real-time as it is being captured by an optical device. Atstep 220, a tracker may be associated with the object in response to afirst instruction from a user. For example, the user may drag-and-dropan icon designating a tracker onto the object (e.g., a person's face) toinstruct the editor to associate a face tracker with the object. Asanother example, the user may instruct the editor to add a particulartype of tracker (e.g., face tracker, hand tracker, etc.) into theaugmented reality design. Upon detection of a particular object (e.g., aperson's face) in the video, the editor may associate the tracker withthat detected object. In particular embodiments, another tracker may beadded and associated with the same object. In particular embodimentsanother tracker may be added and associated with the tracker (e.g., inother words, a tracker that tracks the position/orientation of anothertracker). At step 230, the tracker may be displayed in the video. Forexample, the tracker may provide visual orientation and/or positionguidance to reflect the orientation and/or position of the associatedobject. For instance, the tracker may be displayed as a renderedthree-dimensional Cartesian axis, a facial mesh (which may be generatedbased on a multi-point facial rig of the object), or any other suitabledisplay indicators. In particular embodiments, the tracker may bepositioned with the object being tracked. In particular embodiments, thetracker may be positioned separate from the object being tracked. Theeditor may maintain a relative position and/or orientation of thetracker to the tracked object as the tracked object changes positionand/or orientation. In particular embodiments, the user may adjust theposition and/or orientation of a tracker relative to the object, whichmay cause corresponding adjustments to a position/orientation of theassociated augmented-reality object relative to the tracked object.

At step 240, an augmented-reality object may be associated with thetracker in response to a second instruction from the user. For example,the user may import from file or select an augmented-reality object(e.g., a three-dimensional or two-dimensional object) and add it to theaugmented-reality design. The augmented-reality object may be importedin real-time while the video is being displayed. The augmented-realityobject may be associated with the desired tracker so that the objectmoves dynamically according to data provided by the tracker. The usermay specify an association through any conventional means, such as bydragging-and-dropping the augmented-reality object onto the tracker orselecting the desired tracker through a menu interface. Any number ofaugmented-reality objects may be associated with the same tracker. Atstep 250, the augmented-reality object may be displayed in the video.For example, the editor may create a composite scene of the video andthe augmented-reality object. The augmented-reality object may beconfigured to move according to movements of the tracker, which in turnmay move according to movements of the tracked object. The editor maymaintain a relative position and/or orientation of the augmented-realityobject to the tracker as the tracker changes position and/ororientation. In particular embodiments, an aspect ratio, a size, aposition, or an orientation of the displayed augmented-reality objectmay be adjustable by the user as the augmented-reality object is beingdisplayed in the video. In particular embodiments, the augmented-realityobject may be configured to have certain behaviors (e.g., animation,movement, changes in position, orientation, or color, etc.). Inparticular embodiments, the behavior may be controlled by programmingcode (e.g., JavaScript) and may be changed by editing the programmingcode. In particular embodiments, the code may be edited in real-timewhile the augmented-reality object is being displayed.

At step 260, one or more defined relationships between the tracker andthe augmented reality object may be stored in one or more files. Forexample, once the design is complete, the designer may save or exportthe design into a file, which may then be used to cause theaugmented-reality effect to be displayed on an end-user's device inoperation. In particular embodiments, design instructions from the user(e.g., adding/associating a tracker or augmented-reality object) may bereceived by the editor in real-time while the video is being displayed,and the tracker and/or augmented-reality object may be added to thevideo in real-time while the video is being displayed. Thus, the Editormay provide real-time feedback as the designer is designing. Particularembodiments may repeat one or more steps of the method of FIG. 2, whereappropriate. Although this disclosure describes and illustratesparticular steps of the method of FIG. 2 as occurring in a particularorder, this disclosure contemplates any suitable steps of the method ofFIG. 2 occurring in any suitable order. Moreover, although thisdisclosure describes and illustrates an example method for designing anaugmented-reality effect using an augmented-reality design editor,including the particular steps of the method of FIG. 2, this disclosurecontemplates any suitable method for designing an augmented-realityeffect using an augmented-reality design editor, including any suitablesteps, which may include all, some, or none of the steps of the methodof FIG. 2, where appropriate. Furthermore, although this disclosuredescribes and illustrates particular components, devices, or systemscarrying out particular steps of the method of FIG. 2, this disclosurecontemplates any suitable combination of any suitable components,devices, or systems carrying out any suitable steps of the method ofFIG. 2.

In particular embodiments, the Editor may define rules and systems toensure that virtual objects scale to the form factors and aspect ratiosof different display devices, and making those rules and systems part ofthe design/creation process, rather than an afterthought. Theembodiments described herein provide systems and user interfaces forspecifying various scaling configurations that are intuitive,comprehensive, and flexible. For example, at a high level, the Editormay provide a user interface that allows designers to choose where toanchor an object and specify how its position, orientation, and/or sizeshould respond to different display specifications.

FIG. 3A illustrates example configuration options for an object (e.g.,an image) that govern how the object may be positioned in anaugmented-reality scene. In particular embodiments, the Editor maydisplay a selectable interface that allows a designer to select ananchor for an object. In particular embodiments, an anchor may define(1) a relative point in the associated object from which distance ismeasured, and (2) a relative point in the display canvas to which theobject is anchored. For example, if a designer selects the lower-leftcorner as the anchor for an object, the lower-left corner of the 2Dcanvas used for displaying the object and the lower-left corner of theobject may be used as the points from which distance is measured (e.g.,for calculating position offsets). In particular embodiments, the userinterface for anchor selection may be a polygon (e.g., square) withselectable corners, sides, and/or center. An example of such a userinterface is shown in, e.g., FIG. 3A at labels 301, 306, 311, and 316.In the example shown, the lower-left corner is selected to be theobject's anchor.

In particular embodiments, the Editor may allow the designer to define aposition offset for the object relative to its anchor. In particularembodiments, the position offsets may be specified as an x value and a yvalue in the display canvas' Cartesian plane (e.g., positive values forupwards and to the right; negative values for downwards and to theleft). In particular embodiments, the position offset may be measuredfrom the object's anchor point in the canvas (e.g., bottom-left cornerof the canvas) to the anchor point in the object (e.g., bottom-leftcorner of the image). For example, referring to one exampleconfiguration 300 in FIG. 3, where the anchor point 301 is specified tobe the bottom-left corner and offset values set to x and y 302, theassociated object (the square) is positioned in the canvas (therectangle) such that the bottom-left corner of the object and thebottom-left corner of the canvas are some distance apart (see, e.g.,303). In this example, the position of the object's bottom-left corneris determined based on the position of the bottom-left corner of thecanvas, offset by the specified x and y values. If instead the anchor isdefined to be, e.g., the center, the center point of the object would bedetermined based on the center point of the canvas, offset by x and y.This general principal applies to other anchor selections as well.

In particular embodiments, position offsets may be fixed or responsive.In this context, fixed position offsets means that the position offsetdoes not depend on display region's dimensions. For example,configuration 315 shown in FIG. 3 provides an example where the x and yoffsets 317 are both fixed (indicated by “off” in this example), withthe anchor 316 being set as the bottom-left corner. Since the positionoffsets are fixed, the object (square) is positioned in equal distancefrom the bottom-left corner of the canvas (rectangle) regardless ofwhether the canvas is in portrait mode 318 (e.g., height is longer thanwidth) or landscape mode 319 (e.g., height is shorter than width). Inparticular embodiments, fixed position offsets may be specified in unitsof length, such as density-independent pixel, pixel, and metric units.In particular embodiments, instead of entering the specific x and yoffsets, the designer may use a visual design interface to drag-and-dropthe object to a desired location, and the Editor would automaticallydetermine the corresponding position offset from the specified anchor.

In particular embodiments, position offsets may be responsive, thusmaking them dependent on the display region's dimensions. In particularembodiments, responsive position offsets may be specified inpercentages, ratios, proportions, and any other measurements of relativelength. In particular embodiments, rather than manually inputting theresponsive position offset, the designer may use a visual designinterface to place the object at a desired position, and the Editorwould automatically determine the corresponding position offset based onthe specified anchor and the dimensions of the display region. Inparticular embodiments, the x responsive position offset may be theratio of (1) the distance in the x-axis between the object's anchorpoint and the display region's anchor point, to (2) the display region'sx-axis length (e.g., the width). For example, if the width of thedisplay region is 100 density-independent pixels (dp) in length and thex-axis responsive position offset is 10%, the bottom-left point of theobject (the anchor position) would be located 10 dp (i.e., 10% of 100dp) to the right of the bottom-left corner of the display region. Whenthe width of the display region is increased to, e.g., 200 dp (e.g.,when the device switches from portrait to landscape mode), thebottom-left point of the object would then be located 20 dp (i.e., 10%of 200 dp) to the right of the bottom-left corner of the display region.

Similarly, the y responsive position offset may be the ratio of (1) thedistance in the y-axis between the object's anchor point and the displayregion's anchor point, to (2) the display region's y-axis length (e.g.,the height). Configuration 310 shown in FIG. 3 provides an example wherethe x and y offsets 312 are both responsive (indicated by “on” in thisexample), with the anchor 311 being set as the bottom-left corner. Whenthe display region is in portrait mode as shown in 313, the x and ydistances between bottom-left corner of the object and the bottom-leftcorner of the display region appears roughly equal. However, inlandscape mode 314 the x-axis distance between the bottom-left cornersof the object and display region is greater than the correspondingx-axis distance in portrait mode 313, because the width of the displayregion increased in landscape mode while the x-axis responsive positionoffset remained at the same percentage (e.g., 10%). Similarly, inlandscape mode 314 the y-axis distance between the bottom-left cornersof the object and display region is less than the corresponding y-axisdistance in portrait mode 313, because the height of the display regiondecreased in landscape mode while the y-axis responsive position offsetremained at the same percentage (e.g., 10%). In particular embodiments,the x and y responsive position offsets need not both be the same type.For example, configuration 300 shows the x-axis offset being responsive(“on”) and the y-axis offset being fixed (“off”), and configuration 305shows the x-axis offset being fixed (“off”) and the y-axis offset beingresponsive (“on”). In particular embodiments, the designer may toggle aposition offset between fixed and responsive. In response, the Editormay perform automatic unit conversions based on the current dimensionsof the display region.

FIG. 3B illustrates example configuration options for an object that maygovern how the object may be sized in an augmented-reality scene. Inparticular embodiments, the aspect ratio of the object may not be fixed,as shown by the example configurations 320, 325, 330, 335. Because theaspect ratio is not fixed, the height and width of the objects may beindependently altered, which may result in changes to the overall shapeof the object (e.g., the objects shown in 324, 329, and 334 becamerectangles). In particular embodiments, the size of the object may beadjusted relative to an anchor point 321, 326, 331, 336, which may bespecified as described above. For example, if the anchor point is set tobe the bottom-left corner, the other three corners in the rectangle maybe computed from that corner using the specified height and width values322, 327, 332, 337.

In particular embodiments, the height and width of the object may beindependently set as either fixed or responsive. In the configuration335 where both the height and width are 337 are fixed (indicated by“off”), the height and width may not be dependent upon the dimensions ofthe display region in particular embodiments. For example, the objects(square) are the same in the portrait view 338 and landscape view 339.However, in the configuration 330 where both the height and width 332are responsive (indicated by “on”), these values may represent aproportion of the object's height and width to the height and width ofthe display region, respectively. For example, the actual height of theobject may be computed by multiply the responsive height proportion(e.g., 33% or ⅓) with the current height of the display region. Forinstance, if the height of the display region in portrait mode 333 is100 dp, then the height of the object may be 33 dp (i.e., ⅓×100 dp).When the display region switches from portrait mode 333 to landscapemode 334, its height may decrease (e.g., to 60 dp), which may in turncause the object's height to decrease to 20 dp (i.e., ⅓×60 dp).Similarly, the actual width of the object may be computed by multiplyingthe responsive width proportion (e.g., 50% or ½) with the current widthof the display region. For instance, if the width of the display regionin portrait mode 333 is 60 dp, then the width of the object may be 30 dp(i.e., ½×60 dp). When the display region switches from portrait mode 333to landscape mode 334, its width may increase (e.g., to 100 dp), whichmay in turn cause the object's width to increase to 50 dp (i.e., ½×100dp).

In particular embodiments, the height and width of the object may beindividually set as fixed or responsive. For example, configuration 320shown an example where the width is responsive and the height is fixed,and configuration 325 shows an example where the width if fixed and theheight is responsive. In particular embodiments, when the width orheight is toggled from one type to another (e.g., fixed to responsive orvice versa), the Editor may automatically convert a specifiedmeasurement unit to the other measurement unit using the currentdimensions of the display region (e.g., from fixed measurements oflength to responsive proportion, or vice versa).

In particular embodiments, the aspect ratio of the objects may belocked, as shown by the example configurations 340, 345, 380. Becausethe aspect ratio is fixed, the overall shape of the object would remainthe same even when the height and/or width of the object changes due tochanges in the dimensions of the display region (e.g., the objectremains a square in 344, 349, 353, 354, 355). In particular embodiments,the dimensions of the object with locked aspect ratio may be governed bywidth, height, or both. For example, in the configuration 340 where theobject's size is dictated by responsive scaling of its width 342, whenthe width of the display region increases (e.g., from 60 dp to 100 dp),the width of the object may also increase (e.g., from 30 dp to 50 dp, ifthe responsive width is set at 50%). In turn, the height of the objectmay be set to 50 dp as well, since the aspect ratio of a square is 1:1.Consequently, the square object in portrait mode 343 may be enlarged inlandscape mode 344. As another example, in the configuration 345 wherethe object's size may be dictated by responsive scaling of its height347, when the height of the display region decreases, (e.g., from 100 dpto 60 dp), the height of the object may also decrease (e.g., from 33 dpto 20 dp, if the responsive height is set at 33%). This in turn maycause the width of the object to be 20 dp in order to maintain theaspect ratio of 1:1. Consequently, the square object in portrait mode348 may become smaller in landscape mode 349.

In particular embodiments, the object's size may be dictated byresponsive scaling of either height or width, in which case the objectmay scale conservatively. An example of this is shown in configuration380, where sizing is based on both width and height 351. As shown in352, the responsive width may be 50% and the responsive height may be33%. If the width of the display region increases but its height remainsthe same, as shown in 353, the Editor may recognize that the object'ssize may increase if responsive scaling is based on width, and that theobject's size may not change if responsive scaling is based on height.If the Editor scales conservatively, the smaller size may be adopted; onthe other hand, if the Editor scales aggressively, the larger size maybe adopted. As another example, if the width of the display regiondecreases while its height remains the same, as shown in 354, the Editormay recognize that the object's size may decrease if responsive scalingis based on width, and that the object's size may not change ifresponsive scaling is based on height. However, in this example theoriginal size of the object may not fit in the new display region. Thisis why in particular embodiments it may be preferable to scaleconservatively (i.e., adopting the smaller size). In an example wherethe display region's height decreases and its width increases, as shownin 355, the Editor may compute the size and width of the object andcompare them. For example, if the display region shown in 355 has aheight of 60 dp and a width of 100 dp, the object's height may be 20 dp(i.e., 33%×60 dp) and its width may be 50 dp (i.e., 50%×100 dp). Inparticular embodiments where the smaller size is adopted, the Editor mayresize the object to have sides of 20 dp.

FIG. 3C illustrates example configuration options for an object thatgovern how the object may be rotated in an augmented-reality scene. Inparticular embodiments, the user may select a pivot point around whichthe object may rotate. In particular embodiments, the user interface forselecting the pivot point may be similar to that of an anchor selectioninterface, as previously discussed. For example, in configuration 360,the pivot point 361 is defined to be the bottom-left corner of theobject. Thus, when the object 362 rotates −30°, the rotation pivotsaround the bottom-left corner of the object, as shown in 363. As anotherexample, in configuration 365, the pivot point 366 is defined to be atthe center of the object. Thus, when the object 367 rotates −30°, therotation pivots around object's center, as shown in 368. In particularembodiments, the designer may input a specific degree of rotation and/oruse a drag-and-drop interface to visually rotate the object.

FIG. 3D illustrates example configuration options for an object thatgovern how the object may be scaled in an augmented-reality scene. Inparticular embodiments, the designer may specify a scaling factor toadjust the size of the object without changing its shape. In particularembodiments, the user may select a pivot or scaling point from which thescaling extends. In particular embodiments, the user interface forselecting the scaling point may be similar to that of an anchorselection interface, as previously discussed. For example, inconfiguration 370, the scaling point 371 is defined to be thebottom-left corner of the object. When the object 372 (showing thenormal scale of the object) is scaled by a factor of 0.7, its size maybe reduced, as shown in 373. Because the scaling point is defined to bethe bottom-left corner in this case, the new object's bottom-left cornerdid not change position; only the other three corners changed positions.As another example, in configuration 375, the scaling point 376 isdefined to be the center of the object. When the object 377 (showing thenormal scale of the object) is scaled by a factor of 1.2, its size maybe enlarged, as shown in 378. Because the scaling point is at thecenter, the new object's center remains in the same position.

FIG. 4 illustrates an example method 400 for specifying scalingconfigurations for an object using an augmented-reality design editor.The method may begin at step 410, where the editor may associate animage with an anchor positioned specified by a user. The anchor positionmay define a first relative point in the image and a second relativepoint in a first display region for displaying the image. In particularembodiments, the points in the image and display regions may correspondto the position defined by the anchor position. For example, if theanchor position is selected to be the bottom-left corner, thebottom-left corner of the image may be a first relative point and thebottom-left corner of the display region may be a second relative point.As another example, if the anchor position is selected to be the center,the center of the image may be a first relative point and the center ofthe display region may be a second relative point. In particularembodiments, the anchor position may be selected from a plurality ofpredetermined anchor positions, comprising a corner (e.g., bottom-left,bottom-right, top-left, top-right), a side (e.g., left, right, top,bottom), or a center.

At step 420, the image may be associated with a first position offset(e.g., in the x direction) and a second position offset (e.g., in the ydirection). In particular embodiments, the first position offset may beused to define a first position of the image relative to the displayregion based on the first relative point in the image and the secondrelative point in the first display region. In particular embodiments,the first position offset may define a relative separation between thefirst relative point in the image and the second relative point in thefirst display region in an x-axis or a y-axis of a display plane of thefirst display region. For example, assuming the anchor position isdefined to be the bottom-left corner and the bottom-left corner of thedisplay region is positioned at coordinates (0, 0) in Cartesian space.If the position offsets for an object are (3, 5), the bottom-left cornerof the object, when rendered, may have coordinates (3, 5). If insteadthe bottom-left corner of the display region is positioned atcoordinates (5, 5), then the bottom-left corner of the object mayinstead have coordinates (8, 10). In particular embodiments, theposition offsets (e.g., x and y offsets) may be individually set as afixed offset (e.g., measured in a unit of length, such as pixels,density-independent pixels, inches, centimeters, etc.) or a responsiveoffset (e.g., specified as a proportion). For example, one of theoffsets (e.g., the x-axis) may be fixed, and the other (e.g., y-axis)may be responsive. As another example, both offsets may be fixed or bothmay be responsive. In particular embodiments, the editor may initiallyreceive a fixed positioned offset specified as a unit of length by theuser, and upon receiving a user instruction to change the offset frombeing fixed to responsive, automatically convert it into a responsiveoffset based on a proportion of the fixed position offset to a dimensionof the first display region. For example, if the fixed offset is 5 dpand the x-dimension of the display region is 100 dp, the fixed 5 dpoffset may be converted into a 5/100 or 1/20 responsive offset. Asanother example, if a current responsive x-dimension offset is 1/100 andthe x-dimension of the display region is 200 dp, the converted fixedoffset may be 2 dp (based on the 1/100 responsive offset multiplied bythe 200 dp dimension of the display region).

At step 430, a first dimension and a second dimension specified by theuser may be associated with the image. For example, the first dimensionand the second dimension may be the desired length and width of theimage. In particular embodiments, the first and second dimensions may beindividually set as being fixed or responsive. For example, one of thedimensions may be fixed (e.g., measured in units of length) and theother may be responsive (e.g., measured in proportion), or both may befixed or responsive. In particular embodiments, the editor may initiallyreceive a fixed dimension specified as a unit of length by the user, andupon receiving a user instruction to change the dimension from beingfixed to responsive, automatically convert it into a responsivedimension based on a proportion of the fixed dimension to a dimension ofthe first display region. For example, if the x-dimension of the imageis 50 dp and the x-dimension of the display region is 100 dp, the fixed50 dp x-dimension may be converted into a 50/100 or ½ responsivedimension. As another example, if a current responsive x-dimension is40/100 and the x-dimension of the display region is 200 dp, theconverted fixed x-dimension may be 80 dp (based on the 40/100 responsivedimension multiplied by the 200 dp dimension of the display region). Inparticular embodiments, the aspect ratio of the image may be locked orunlocked in response to a selection by the user.

At step 440, the editor may associate the image with a scaling point anda scaling factor. For example, if the scaling point is defined to be thebottom-left corner of the image, then that point of the image beforescaling may be in the same position as the point of the image afterscaling. As another example, if the scaling point is defined to be thebottom side of the image, then the mid-point of the bottom side of theimage before and after scaling may remain at the same position,regardless of how it is scaled.

At step 450, the editor may associate the image with a pivot point and arotation measure (e.g., measured in degrees). For example, if the pivotpoint is defined to be the bottom-left corner of the image, then thatpoint of the image prior to any rotation may be shared by thepivoted/rotated version of the image. In other words, the image isrotated relative to the pivot point.

At step 460, the editor may store information associated with the image,such as the associated anchor position, position offsets, sizingdimensions, scaling point, scaling factor, pivot point, rotationmeasure, and/or other associated information in one or more files.

At step 470, the stored files may be configured to generate anaugmented-reality effect and cause the image to be displayed at a secondposition in a second display region (e.g., on an end-user device). Forexample, an augmented-reality rendering engine may access the file andbe instructed to render an augmented-reality effect accordingly. Inparticular embodiments, the anchor position may define a relative pointin this second display region, such as its bottom-left corner. Inparticular embodiments, the position offsets may be used to define thesecond position of the image relative to the second display region basedon the first relative point in the image and the third relative point inthe second display region. For example, continuing the example providedabove with respect to step 420, if the anchor is defined to be thebottom-left corner and the position offsets are defined to be (3, 5),then the position of the image relative to the display region of theend-user device may be computed based on the bottom-left corner of theimage and the bottom-left corner of the end-user's display region. Forexample, if the end-user's display region is positioned at (0, 0), thenthe bottom-left corner of the image may be positioned at (3, 5). If thedisplay region is instead positioned at (2, 2), then the image may bepositioned at (5, 7). If instead the x-dimension offset is a responsiveproportion, such as 1/100, and the x-dimension of the end-user's displayregion is 500 dp, the converted fixed offset may be 5 dp (based on the1/100 responsive offset multiplied by the 500 dp dimension of thedisplay region). In particular embodiments, the size of the image may bedetermined based on the first dimension, the second dimension, andwhether the aspect ratio of the image if locked. In particularembodiments, the image may be scaled according to the scaling factorfrom the specified scaling point. In particular embodiments, the imagemay be rotated based on the rotation measure (e.g., in degrees) andrelative to the pivot point.

Particular embodiments may repeat one or more steps of the method ofFIG. 4, where appropriate. Although this disclosure describes andillustrates particular steps of the method of FIG. 4 as occurring in aparticular order, this disclosure contemplates any suitable steps of themethod of FIG. 4 occurring in any suitable order. Moreover, althoughthis disclosure describes and illustrates an example method forspecifying scaling configurations for an object using anaugmented-reality design editor including the particular steps of themethod of FIG. 4, this disclosure contemplates any suitable method forspecifying scaling configurations for an object using anaugmented-reality design editor, including any suitable steps, which mayinclude all, some, or none of the steps of the method of FIG. 4, whereappropriate. Furthermore, although this disclosure describes andillustrates particular components, devices, or systems carrying outparticular steps of the method of FIG. 4, this disclosure contemplatesany suitable combination of any suitable components, devices, or systemscarrying out any suitable steps of the method of FIG. 4.

FIG. 5A illustrates an example of a conceptual relationship between adisplay region, a three-dimensional space displayed through the displayregion, and a viewer. In particular embodiments, the viewer may berepresented by a camera 501. In particular embodiments, the camera 501may be positioned at a particular distance from a display region orcanvas 502. For example, the display region or canvas 502 may be amobile device's display screen or a portion thereof. In particularembodiments, a three-dimensional space may be viewable through thedisplay region 502. For example, the three-dimensional space may bedefined such that it comprises an object 503. The object 503 may be,e.g., a three-dimensional object (e.g., a cube, as illustrated), aplane, a line, smoke particles, rays of light, a person, a tree, or anyother object. In particular embodiments, displaying a scene of thethree-dimensional space may comprise projecting visible objects withinthe space onto the two-dimensional display region 502. As an example,portions of the cube 503 visible to the viewer 501, such as the surfacefacing the viewer 501, may be projected onto the display region 502 as asquare 504. In particular embodiments, the Editor may present theaugmented-reality design in the manner shown in FIG. 5A tosimultaneously show the objects as they appear in three-dimensionalspace and on the two-dimensional canvas.

In particular embodiments, the Editor may provide a system for measuringand representing objects in augmented reality to address the challengesof having both two-dimensional (“2D”) and three-dimensional (“3D”)objects, real and virtual, together in a scene. In particularembodiments, different measuring systems may be used for 2D and 3Dobjects to address their unique needs. For example, 3D virtual objectsmay need to look as if they belong in a real-world scene, such asplacing a 3D virtual hat on a real person's head. Thus, in particularembodiments it may be useful to measure 3D objects in real-world units,such as in centimeters and/or inches. One potential advantage of this isthat it allows designers to create three-dimensional objects accordingto real-world scales, since augmented-reality objects may often bedisplayed with real-world objects. In particular embodiments, 2Dprojections (e.g., 504) onto the display region 502 may be measured inpixels or density-independent pixels. Doing so may facilitate certaindisplay calculations, including, e.g., rescaling the objects shown toaccommodate different dimensions of the display region 502.

FIG. 5B illustrates an example user interface for concurrently showinghow objects appear in three-dimensional space and in a two-dimensionaldisplay region. As discussed above, designing augmented-reality effectsmay involve defining objects in three-dimensional space and projectingthe objects onto a display region. How an object appears inthree-dimensional space may not necessarily achieve the desired effectonce it is shown in the display region. Conversely, designing athree-dimensional effect based on how the effect appears in thetwo-dimensional display region may not provide designers with theappropriate perspective, especially in designs where objects interactwith each other and/or with real-world objects in three-dimensionalspace. Thus, in particular embodiments, the Editor may provide a designinterface that concurrently shows how an augmented-reality effectappears in three-dimensional space and two-dimensional space. Inparticular embodiments, the Editor 509 may provide a three-dimensionaldisplay region 510 for displaying objects in three-dimensional space. Inparticular embodiments, the three-dimensional display region 510 maydisplay a three-dimensional grid to provide visual guidance on howobjects in the scene are oriented. In particular embodiments, the Editor509 may concurrently provide a two-dimensional display region 520 fordisplaying a scene of the three-dimensional space shown in thethree-dimensional display region 510. The scene, for example, may be aviewable portion of the three-dimensional space as seen through adisplay screen or canvas. In particular embodiments, the two-dimensionaldisplay region 520 may be considered as a simulator view for showing howthe effect would appear to an end user. In particular embodiments, thetwo-dimensional display region 520 may be shown as a screen of a mobilephone, laptop, tablet, or any other display device. In particularembodiments, the two-dimensional display region 520 may display atwo-dimensional grid to provide visual guidance on object placement. Inparticular embodiments, as the designer alters a design (e.g., changethe position, size, or orientation of an object) through thethree-dimensional display region 510, the changes may be reflected inthe other display region(s) in the appropriate view, such as thetwo-dimensional display region and/or the other three-dimensionaldisplay regions. In particular embodiments, the design may also bealtered through the two-dimensional display region, and the changes maybe reflected in the other three-dimensional display regions. Thisadvantageously allows the designer to concurrently view and adjustaugmented-reality effects in both three-dimensional and two-dimensionalviews.

FIG. 5C illustrates an embodiment of the Editor 530 configured toconcurrently display scenes defined in three-dimensional space fromdifferent perspectives. The Editor 530 may support any number of displayregions, each independently configurable to display a scene in thethree-dimensional space from a specified perspective (e.g., front, back,top, bottom, left, right, and perspective views). In the example shown,the Editor 530 may concurrently display four three-dimensional displayregions. Display region 531 shows a front view of an object (e.g., ananimal mask) defined in three-dimensional space. Display region 532provides a left-side view, display region 533 provides a top view, anddisplay region 534 provides a perspective view. In particularembodiments, each of these display regions may be individuallyconfigured to display a scene from a particular perspective. Inparticular embodiments, a two-dimensional display region 540 may providea simulation view of how the augmented-reality effect would appear to anend user. In particular embodiments, edits made through any of thesedisplay regions 531, 532, 533, 534 may be dynamically reflected in theother display regions (including the simulation region 540).

FIG. 6 illustrates an example user interface for controlling therendering order of objects. In particular embodiments, objects definedin three-dimensional space may be rendered to produce a visual effect.In particular embodiments, the rendering process may be performed by theEditor to provide a preview of the scene. In particular embodiments,once the design is complete, the three-dimensional model may be stored(e.g., as a file) and used by an end-user device (e.g., mobile phone) torender the augmented-reality effect in operation. Since objects may behidden behind other objects in the three-dimensional space, inparticular embodiments the objects may be rendered sequentially based ontheir respective distance from the viewer. For example, FIG. 6 shows aviewer 601 viewing a three-dimensional space through a display region602. In the example shown, the three-dimensional space comprises threecubes, each being positioned at a particular distance away from theviewer 601 or the display region 602. In the example shown, cube 610 maybe closest to the viewer 601 or the display region 602, cube 612 may befarther relative to cube 610, and cube 611 may be the farthest of thethree. In particular embodiments, the object may be rendered in sequencebased on their relative distance from the viewer 601 or display region602. For example, closer objects may be rendered earlier (e.g., therendering sequence of the three cubes may be cube 610, cube 612, and611). One advantage of rendering the objects in this manner is thatobjects that are hidden behind closer objects may not be visible andtherefore need not be rendered, which in turn saves processing time.

While the rendering order may be based on the objects' distance from theviewer (e.g., closer objects may be rendered first), doing so may notalways yield the desired result. For example, if a scene on Marsincludes a red filter, smoke, and an astronaut placed in that order in3D space from the viewer, rendering the objects in the same order mayresult in the smoke having a red tint. To retain the original color ofthe smoke, the smoke may be rendered first, followed by the red filterand astronaut so that the astronaut would have the desired red tint butnot the smoke. In particular embodiments, the Editor may define arendering-order system that allows designers to designate the renderingorder for each object relative to one another. For example, the designermay associate each object with a rendering order or “layer,” which mayrepresent a rendering order relative to the other objects. The sequencein which objects are rendered may be based on the layers or renderingorders associated with the objects. For example, if the first, second,and third rendering layers are assigned to cube 612, cube 610, and cube611, respectively, the cubes may be rendered in that same order, eventhough cube 610 is relatively closer the viewer 601 than cube 612. Thus,the sequence for rendering objects in different layers may be based ontheir assigned layers or rendering orders, regardless of their relativepositions in the three-dimensional space. In particular embodiments,more than one object may be associated with a layer. In particularembodiments, the rendering order for objects in the same layer may bebased on their relative distance to the viewer 601 or display region602. In particular embodiments, each object may be assigned, by default,a layer or rendering order that corresponds to the order in which theobject is added to the design relative to other objects. For example, ifcube 612 was added to the design first, followed by cube 610 and cube611 in that order, the cubes may be assigned the default renderingorders of first, second, and third, respectively. In particularembodiments, the user may change the layer assigned to an object. Inparticular embodiments, the Editor may provide a user interface thatdisplays an ordered list 620 of entries, each of which representing anobjected defined in the three-dimensional space. The relative positionsof the entries in the ordered list may represent relative renderingorders. For example, the layer list or rendering-order list 620 shown inFIG. 6 shows, from top to bottom, cube 612, cube 610, and 611. Thesequence in which these cubes are listed may represent their renderingorder (e.g., cube 612 may be rendered first and cube 611 may be renderedlast). In particular embodiments, the order of the entries in the list620 may be altered in the panel using a drag-and-drop or otheruser-input mechanism. For example, a user wishing to render cube 611first may drag the last entry in the list 620 and drop it above thefirst entry, which may result in the new ordered list to be, from tobottom, cube 611, cube 612, and cube 610. In particular embodiments, thelist 620 may instead show labels assigned to layers, and a separate listmay show objects in the design. In particular embodiments, the listingof each object may have an indicator that indicates the layer associatedwith the object.

The color that is ultimately assigned to a pixel in a display region maydepend in part on the relative distances between the display region andthe objects in the three-dimensional space. For example, a red polygonmay completely obstruct a green polygon that is farther away from theviewer, and therefore the color red, and not green, may be stored in acolor buffer to reflect the current state of what should be displayed.In particular embodiments, in order to account for potentially hiddenobjects (e.g., the green polygon), the rendering engine may perform arelative depth comparison between objects and ignore those that arehidden. In particular embodiments, in order to perform the depthcomparison efficiently, the rendering engine may use a depth buffer orz-buffer to track the depths of the pixels that are present in the colorbuffer. In other words, the depth buffer may track the depths of thepixels that are currently visible or closest to the viewer. With thedepth buffer, the rendering engine would only need to compare the depthof each pixel of a new object to the corresponding depth stored in thedepth buffer to determine which is closest.

More specifically, in particular embodiments the process for renderingobjects defined in three-dimensional space may include the use ofbuffers or matrices to track the color that should be presented by eachpixel in the display region. In particular embodiments, a depth bufferand a corresponding color buffer may be defined such that each cell ineach buffer may represent a pixel in the display region. For example, ifa display region has 200×200 pixels, the depth buffer and color buffermay each be defined as a 200×200 matrix, with each cell in the matrixbeing associated with a pixel. In particular embodiments, each cell inthe depth buffer may be used to store the distance between the displayregion and the then-closest object appearing at the pixel associatedwith the cell. For example, if a point of an object (e.g., a point onthe surface of a sphere) would be displayed by a pixel, thecorresponding cell in the depth buffer may store the distance betweenthat point and the pixel on the canvas. In particular embodiments, thedistance may be normalized to be a value between 0 and 1, where asmaller value represents closer proximity. In particular embodiments,the corresponding cell in the color buffer may be configured to storethe color of the point in the then-closest object that appears at thepixel. For example, if a red sphere is in three-dimensional space and isthe then-closest object to the display region (e.g., it may be the firstobject processed), conceptually a rendering engine may project the redsphere onto the two-dimensional display region to determine which pixelswould display the red sphere. In particular embodiments, cellscorresponding to those pixels in the display buffer may store thedistances between the pixels and the corresponding points of the redsphere, and cells corresponding to the same pixels in the color buffermay store the colors of those point (e.g., red or shades of red). Inparticular embodiments, since the red sphere may not be the only objectin the three-dimensional space, information stored in the depth bufferand color buffer may change. For example, if the red sphere discussedpreviously is the first object rendered, the depth buffer and colorbuffer may store distance and color information pertaining to the redsphere. If the next object processed is a green sphere that ispositioned behind and partially hidden by the red sphere, the renderingengine may first compute the distances between the visible points on thegreen sphere and the corresponding pixels in the display region. Then,the distance information of each point may be compared to thecorresponding distance information stored in the depth buffer for theassociated pixel to determine whether the green sphere at that pixel isvisible. If the point on the green sphere is closer than thethen-closest point on the red sphere, the depth buffer and color buffermay be updated to reflect the distance and color information of thegreen sphere, respectively. On the other hand, if the point on the greensphere is farther, then no updates may be performed so that the depthbuffer and color buffer continue to store the red sphere's information.Since in this example the green sphere is only partially covered by thered sphere, the end result of this second iteration of processing wouldbe that some cells in the buffers would store the red sphere'sinformation and some cells would store the green sphere's information.

In particular embodiments, the rendering process described above may beadjusted for objects with special properties. For example, if the redsphere in the above example is transparent or translucent, the viewershould be able to see the green sphere through the red polygon. In otherwords, the color of the green sphere should contribute to the colordisplayed. The above process, however, may not yield the expectedresult. As an example, assuming the red sphere is already in thebuffers, the rendering engine, when processing the green sphere, may:(1) compute a distance between the display region (or view) and a pointon the green sphere; (2) read the depth buffer to determine the distancebetween the display region and the then-closest object (in this case,the red sphere); (3) compare green sphere's distance to the then-closestdistance; (4) determine that the point on the green sphere is hiddenbehind the red sphere because its distance is farther away; and (5)ignore that point on the green sphere. The end result of this example isthat green may not contribute to the color buffer, even though it shouldbecause the red sphere in this case is transparent or translucent.

When dealing with objects with special properties, designerstraditionally have to manually manipulate how the depth buffer is usedin order to render the desired scene. This typically requires advancedknowledge of how depth buffer works and its effects, as well as knowinghow to change the rendering process' behavior with respect to the depthbuffer and that particular object. To simplify this process, the Editorin particular embodiments may provide a user interface allowingdesigners to select the desired special property for an object, such asopaque, transparent or translucent, overlay, and cutout. Once selected,the Editor would handle the corresponding depth-buffer manipulation,thereby abstracting away the complications of direct depth-buffermanipulation. Thus, the designer would not need to know how to configurethe depth-buffer to effectuate the desired visual effect and would noneed to do so manually through coding.

FIGS. 7A-7B illustrate an example of an object having an opaqueproperty. FIG. 7A illustrates a camera 700, which represents theposition of a viewer, and a display region 701 through which a scene ofa three-dimensional space is displayed. The example shows two opaqueobjects in the three-dimensional space, a first plane 702 and a secondplane 703, positioned such that the first plane 702 is in front of thesecond plane 703 with respect to the camera 700. FIG. 7B illustrates thescene of the three-dimensional space as displayed on the display region701. Because the first plane 702 is opaque, it completely covers aportion of the second plane 703.

In particular embodiments, the Editor may provide a user interfacethrough which a designer may indicate that an object has an opaqueproperty. In particular embodiments, the Editor in response mayautomatically associate the object with instructions (e.g., in OpenGL®)that would enable reading and writing to the depth buffer when theobject is being rendered. Thus, for example, when the opaque object isbeing rendered, its distance information may be compared with thedistance information stored in the depth buffer to determine whether theobject appears in front of the then-closest object, which in turnindicates whether the object is visible (at least with respect to theother objects that have been processed before it). If the object is theclosest, then the distance information associated with the object may bewritten to the depth buffer so that it may serve as the new referencepoint for determining whether subsequently processed objects arevisible. As such, other objects positioned behind the opaque object, asdetermined using the depth buffer, may not contribute to thecorresponding pixels' colors and would thus appear hidden.

FIGS. 8A-8B illustrate an example of an object having a transparent ortranslucent property. FIG. 8A illustrates a camera 800, which representsthe position of a viewer, and a display region 801 through which a sceneof a three-dimensional space is displayed. The three-dimensional spaceincludes a transparent/translucent plane 802 and an opaque plane 803,with the transparent plane 802 positioned in front of the opaque plane803 with respect to the camera 800. FIG. 8B illustrates the scene of thethree-dimensional space as displayed on the display region 801. Becausethe transparent/translucent plane 802 allows light through, the opaqueplane 803 is visible through the transparent/translucent plane 802. Inother words, the opaque plane 803 contributes to the pixels occupied bythe transparent/translucent plane 802, despite being positioned behindthe transparent/translucent plane 802.

In particular embodiments, the Editor may provide a user interfacethrough which a designer may specify that an object has a transparent ortranslucent property. In particular embodiments, the Editor in responsemay associate the object with instructions (e.g., in OpenGL®) that wouldenable reading to the depth buffer and disable writing to the depthbuffer when the object is being rendered. Conceptually, regardless ofwhether the object is transparent/translucent, another object (e.g., anopaque object) that appears in front of it may obstruct it from view.Thus, for example, when a transparent/translucent object is beingrendered, its distance information may be compared with the distanceinformation stored in the depth buffer to determine whether the objectappears in front of the then-closest object, which in turn indicateswhether the object is visible (at least with respect to the otherobjects that have been processed before it). However, since the objectis transparent or translucent, other objects that appear behind it maystill contribute to the corresponding pixels' colors so that those otherobjects may be visible through the transparent or translucent object. Inparticular embodiments, this may be effectuated by disabling writing tothe depth buffer even if the transparent/translucent object is thethen-closest object, so that the transparent/translucent object'sposition or distance information does not prevent other objects behindit from being rendered.

FIGS. 9A-9B illustrate an example of an object having an overlayproperty. FIG. 9A illustrates a camera 900, which represents theposition of a viewer, and a display region 901 through which a scene ofa three-dimensional space is displayed. The three-dimensional spaceincludes a first opaque plane 902 and a second opaque plane 903, withthe first opaque plane 902 positioned in front of the second opaqueplane 903 with respect to the camera 900. FIG. 9A also shows an overlay904, which in this example is positioned in between the first opaqueplane 902 and second opaque plane 903. An overlay may be, for example, abanner, a logo, informational text, on-screen menu, and any other visualobject that is designed to be visible to a viewer regardless positionsof other objects in the scene. FIG. 9B illustrates the scene of thethree-dimensional space as displayed on the display region 901. Theoverlay object 904 is visible despite being positioned behind the firstopaque plane 902.

In particular embodiments, the Editor may provide a user interfacethrough which a designer may specify that an object has an overlayproperty. In particular embodiments, the Editor in response mayassociate the object with instructions (e.g., in OpenGL®) that woulddisable reading to the depth buffer and enable writing to the depthbuffer when the object is being rendered. Conceptually, an overlay maybe designed to be visible and appear in front of other objectsregardless of its position relative to those objects. Thus, inparticular embodiments, when an overlay object is being rendered, it maynot be necessary to compare its distance information to the distanceinformation of other objects stored in the depth buffer. In particularembodiments, this may be implemented by disabling depth-buffer readingfor this object. Since the overlay would obstruct objects positionedbehind it, in particular embodiments distance information associatedwith the overlay may be written to the depth buffer so that hiddenobjects need not be rendered. In particular embodiments, the distanceinformation associated with an overlay object may be 0 to indicate thatit is at the front-most position, regardless of the actual distancebetween the overlay object and the display region or viewer inthree-dimensional space.

FIGS. 10A-10B illustrate an example of an object having a cutoutproperty. FIG. 10A illustrates a camera 1000, which represents theposition of a viewer, and a display region 1001 through which a scene ofa three-dimensional space is displayed. The three-dimensional spaceincludes a cube 1002 and cutout 1003 of the cube. A cutout defines aportion of another object that is to be removed. In the example shown,the cutout 1003 is defined as a smaller cube within the cube 1002. Theend visual effect is a cube 1002 with a cubic hole on one side. FIG. 10Billustrates the scene of the three-dimensional space as displayed on thedisplay region 1001. It is shown here that the surface of the cube 1002facing the camera 1000 has a cubic hole in the middle, as defined by thecutout 1003.

In particular embodiments, the Editor provides a user interface throughwhich a designer may specify that an object has a cutout property. Inparticular embodiments, the Editor in response may associate the objectwith instructions (e.g., in OpenGL®) that would disable reading andwriting to the depth buffer when the object is being rendered.Conceptually, a cutout object may not be visible itself, since it may beused to define a portion of another object that is to be removed. Thus,in particular embodiments, a cutout object should be rendered regardlessof whether it is hidden. In particular embodiments, this may beeffectuated by disabling depth-buffer reading for the cutout object.Because the cutout object may not be visible itself, it may not affectthe rendering of other objects that appear behind it. In other words,when other objects are being rendered, they may discount the cutoutobject even if they appear behind it. In particular embodiments, thismay be effectuated by disabling writing to the depth buffer, so that thecutout object's position or distance information does not prevent otherobjects behind it from being rendered.

FIG. 11 illustrates an example method 1100 for controlling how objectsare rendered using an augmented-reality design editor. At step 1110, theeditor may associate a first visual object with a first rendering orderspecified by a user. At step 1120, the editor may associate a secondvisual object with a second rendering order specified by the user. Thefirst and second visual objects may be defined in a three-dimensionalspace. In particular embodiments, the rendering order of each visualobject may be changed. In particular embodiments, an ordered list ofentries may be displayed in the editor, each entry representing a visualobject defined in the three-dimensional space. In particularembodiments, the relative positions of the entries in the ordered listmay represent relative rendering orders. In particular embodiments, therelative rendering orders may be changed by adjusting the relativeorders of the entries in the list. At step 1130, the editor mayassociate the first visual object and/or second visual object with anopaque property, transparent/translucent property, overlay property, orcutout property. In particular embodiments, the editor may display auser interface associated with the first virtual object (e.g., as amenu) and provide one or more selectable properties, such as opaque,transparent/translucent, overlay, and cutout. At step 1140, the editormay store the information associated with the first and second visualobjects in one or more files, including, e.g., information associatedwith the first visual object, the first rendering order, the secondvisual object, the second rendering, and/or the property (e.g.,transparent). In particular embodiments, depth-buffer accessinstructions corresponding to the specified property may also be stored.For example, for opaque objects, depth-buffer read and write access maybe enabled; for transparent/translucent objects, depth-buffer read maybe enabled and write may be disabled; for overlay objects, depth-bufferread may be disabled and write may be enabled; for cutout objects,depth-buffer read and write may be disabled. At step 1150, the file(s)may be used to render an augmented-reality effect to generate a scene inthe three-dimensional space. In particular embodiments, the first visualobject and the second visual object may be rendered sequentially in anorder determined based on the first rendering order and the secondrendering order. For example, the first visual object may be associatedwith rendering order 1 and the second visual object may be associatedwith rendering order 2, which may cause the first visual object to berendered before the second visual object. As another example, if thefirst and second visual objects are associated with rendering orders 2and 1, respectively, the second visual object may be rendered before thefirst visual object. In particular embodiments, the rendering order maybe independent of the relative positions of the objects. For example,even if the first virtual object may be positioned in thethree-dimensional space closer to a display plane of the scene relativeto the second visual object, the first visual object may be configuredto be rendered prior to or after the rendering of the second visualobject based on a relative order between the first rendering order andthe second rendering order. In particular embodiments, more than onevisual object may be associated with a rendering order (or layer). Inparticular embodiments, objects with the same rendering order may berendered sequentially based on relative positions between the objects inthe three-dimensional space.

Particular embodiments may repeat one or more steps of the method ofFIG. 11, where appropriate. Although this disclosure describes andillustrates particular steps of the method of FIG. 11 as occurring in aparticular order, this disclosure contemplates any suitable steps of themethod of FIG. 11 occurring in any suitable order. Moreover, althoughthis disclosure describes and illustrates an example method forcontrolling how objects are rendered using an augmented-reality designeditor, including the particular steps of the method of FIG. 11, thisdisclosure contemplates any suitable method for controlling how objectsare rendered using an augmented-reality design editor, including anysuitable steps, which may include all, some, or none of the steps of themethod of FIG. 11, where appropriate. Furthermore, although thisdisclosure describes and illustrates particular components, devices, orsystems carrying out particular steps of the method of FIG. 11, thisdisclosure contemplates any suitable combination of any suitablecomponents, devices, or systems carrying out any suitable steps of themethod of FIG. 11.

FIG. 12 illustrates an example network environment 1200 associated witha social-networking system. Network environment 1200 includes a user1201, a client system 1230, a social-networking system 1260, and athird-party system 1270 connected to each other by a network 1210.Although FIG. 12 illustrates a particular arrangement of user 1201,client system 1230, social-networking system 1260, third-party system1270, and network 1210, this disclosure contemplates any suitablearrangement of user 1201, client system 1230, social-networking system1260, third-party system 1270, and network 1210. As an example and notby way of limitation, two or more of client system 1230,social-networking system 1260, and third-party system 1270 may beconnected to each other directly, bypassing network 1210. As anotherexample, two or more of client system 1230, social-networking system1260, and third-party system 1270 may be physically or logicallyco-located with each other in whole or in part. Moreover, although FIG.12 illustrates a particular number of users 1201, client systems 1230,social-networking systems 1260, third-party systems 1270, and networks1210, this disclosure contemplates any suitable number of users 1201,client systems 1230, social-networking systems 1260, third-party systems1270, and networks 1210. As an example and not by way of limitation,network environment 1200 may include multiple users 1201, client system1230, social-networking systems 1260, third-party systems 1270, andnetworks 1210.

In particular embodiments, user 1201 may be an individual (human user),an entity (e.g., an enterprise, business, or third-party application),or a group (e.g., of individuals or entities) that interacts orcommunicates with or over social-networking system 1260. In particularembodiments, social-networking system 1260 may be a network-addressablecomputing system hosting an online social network. Social-networkingsystem 1260 may generate, store, receive, and send social-networkingdata, such as, for example, user-profile data, concept-profile data,social-graph information, or other suitable data related to the onlinesocial network. Social-networking system 1260 may be accessed by theother components of network environment 1200 either directly or vianetwork 1210. In particular embodiments, social-networking system 1260may include an authorization server (or other suitable component(s))that allows users 1201 to opt in to or opt out of having their actionslogged by social-networking system 1260 or shared with other systems(e.g., third-party systems 1270), for example, by setting appropriateprivacy settings. A privacy setting of a user may determine whatinformation associated with the user may be logged, how informationassociated with the user may be logged, when information associated withthe user may be logged, who may log information associated with theuser, whom information associated with the user may be shared with, andfor what purposes information associated with the user may be logged orshared. Authorization servers may be used to enforce one or more privacysettings of the users of social-networking system 30 through blocking,data hashing, anonymization, or other suitable techniques asappropriate. Third-party system 1270 may be accessed by the othercomponents of network environment 1200 either directly or via network1210. In particular embodiments, one or more users 1201 may use one ormore client systems 1230 to access, send data to, and receive data fromsocial-networking system 1260 or third-party system 1270. Client system1230 may access social-networking system 1260 or third-party system 1270directly, via network 1210, or via a third-party system. As an exampleand not by way of limitation, client system 1230 may access third-partysystem 1270 via social-networking system 1260. Client system 1230 may beany suitable computing device, such as, for example, a personalcomputer, a laptop computer, a cellular telephone, a smartphone, atablet computer, or an augmented/virtual reality device.

This disclosure contemplates any suitable network 1210. As an exampleand not by way of limitation, one or more portions of network 1210 mayinclude an ad hoc network, an intranet, an extranet, a virtual privatenetwork (VPN), a local area network (LAN), a wireless LAN (WLAN), a widearea network (WAN), a wireless WAN (WWAN), a metropolitan area network(MAN), a portion of the Internet, a portion of the Public SwitchedTelephone Network (PSTN), a cellular telephone network, or a combinationof two or more of these. Network 1210 may include one or more networks1210.

Links 1250 may connect client system 1230, social-networking system1260, and third-party system 1270 to communication network 1210 or toeach other. This disclosure contemplates any suitable links 1250. Inparticular embodiments, one or more links 1250 include one or morewireline (such as for example Digital Subscriber Line (DSL) or Data OverCable Service Interface Specification (DOC SIS)), wireless (such as forexample Wi-Fi or Worldwide Interoperability for Microwave Access(WiMAX)), or optical (such as for example Synchronous Optical Network(SONET) or Synchronous Digital Hierarchy (SDH)) links. In particularembodiments, one or more links 1250 each include an ad hoc network, anintranet, an extranet, a VPN, a LAN, a WLAN, a WAN, a WWAN, a MAN, aportion of the Internet, a portion of the PSTN, a cellulartechnology-based network, a satellite communications technology-basednetwork, another link 1250, or a combination of two or more such links1250. Links 1250 need not necessarily be the same throughout networkenvironment 1200. One or more first links 1250 may differ in one or morerespects from one or more second links 1250.

FIG. 13 illustrates an example computer system 1300. In particularembodiments, one or more computer systems 1300 perform one or more stepsof one or more methods described or illustrated herein. In particularembodiments, one or more computer systems 1300 provide functionalitydescribed or illustrated herein. In particular embodiments, softwarerunning on one or more computer systems 1300 performs one or more stepsof one or more methods described or illustrated herein or providesfunctionality described or illustrated herein. Particular embodimentsinclude one or more portions of one or more computer systems 1300.Herein, reference to a computer system may encompass a computing device,and vice versa, where appropriate. Moreover, reference to a computersystem may encompass one or more computer systems, where appropriate.

This disclosure contemplates any suitable number of computer systems1300. This disclosure contemplates computer system 1300 taking anysuitable physical form. As example and not by way of limitation,computer system 1300 may be an embedded computer system, asystem-on-chip (SOC), a single-board computer system (SBC) (such as, forexample, a computer-on-module (COM) or system-on-module (SOM)), adesktop computer system, a laptop or notebook computer system, aninteractive kiosk, a mainframe, a mesh of computer systems, a mobiletelephone, a personal digital assistant (PDA), a server, a tabletcomputer system, an augmented/virtual reality device, or a combinationof two or more of these. Where appropriate, computer system 1300 mayinclude one or more computer systems 1300; be unitary or distributed;span multiple locations; span multiple machines; span multiple datacenters; or reside in a cloud, which may include one or more cloudcomponents in one or more networks. Where appropriate, one or morecomputer systems 1300 may perform without substantial spatial ortemporal limitation one or more steps of one or more methods describedor illustrated herein. As an example and not by way of limitation, oneor more computer systems 1300 may perform in real time or in batch modeone or more steps of one or more methods described or illustratedherein. One or more computer systems 1300 may perform at different timesor at different locations one or more steps of one or more methodsdescribed or illustrated herein, where appropriate.

In particular embodiments, computer system 1300 includes a processor1302, memory 1304, storage 1306, an input/output (I/O) interface 1308, acommunication interface 1310, and a bus 1312. Although this disclosuredescribes and illustrates a particular computer system having aparticular number of particular components in a particular arrangement,this disclosure contemplates any suitable computer system having anysuitable number of any suitable components in any suitable arrangement.

In particular embodiments, processor 1302 includes hardware forexecuting instructions, such as those making up a computer program. Asan example and not by way of limitation, to execute instructions,processor 1302 may retrieve (or fetch) the instructions from an internalregister, an internal cache, memory 1304, or storage 1306; decode andexecute them; and then write one or more results to an internalregister, an internal cache, memory 1304, or storage 1306. In particularembodiments, processor 1302 may include one or more internal caches fordata, instructions, or addresses. This disclosure contemplates processor1302 including any suitable number of any suitable internal caches,where appropriate. As an example and not by way of limitation, processor1302 may include one or more instruction caches, one or more datacaches, and one or more translation lookaside buffers (TLBs).Instructions in the instruction caches may be copies of instructions inmemory 1304 or storage 1306, and the instruction caches may speed upretrieval of those instructions by processor 1302. Data in the datacaches may be copies of data in memory 1304 or storage 1306 forinstructions executing at processor 1302 to operate on; the results ofprevious instructions executed at processor 1302 for access bysubsequent instructions executing at processor 1302 or for writing tomemory 1304 or storage 1306; or other suitable data. The data caches mayspeed up read or write operations by processor 1302. The TLBs may speedup virtual-address translation for processor 1302. In particularembodiments, processor 1302 may include one or more internal registersfor data, instructions, or addresses. This disclosure contemplatesprocessor 1302 including any suitable number of any suitable internalregisters, where appropriate. Where appropriate, processor 1302 mayinclude one or more arithmetic logic units (ALUs); be a multi-coreprocessor; or include one or more processors 1302. Although thisdisclosure describes and illustrates a particular processor, thisdisclosure contemplates any suitable processor.

In particular embodiments, memory 1304 includes main memory for storinginstructions for processor 1302 to execute or data for processor 1302 tooperate on. As an example and not by way of limitation, computer system1300 may load instructions from storage 1306 or another source (such as,for example, another computer system 1300) to memory 1304. Processor1302 may then load the instructions from memory 1304 to an internalregister or internal cache. To execute the instructions, processor 1302may retrieve the instructions from the internal register or internalcache and decode them. During or after execution of the instructions,processor 1302 may write one or more results (which may be intermediateor final results) to the internal register or internal cache. Processor1302 may then write one or more of those results to memory 1304. Inparticular embodiments, processor 1302 executes only instructions in oneor more internal registers or internal caches or in memory 1304 (asopposed to storage 1306 or elsewhere) and operates only on data in oneor more internal registers or internal caches or in memory 1304 (asopposed to storage 1306 or elsewhere). One or more memory buses (whichmay each include an address bus and a data bus) may couple processor1302 to memory 1304. Bus 1312 may include one or more memory buses, asdescribed below. In particular embodiments, one or more memorymanagement units (MMUs) reside between processor 1302 and memory 1304and facilitate accesses to memory 1304 requested by processor 1302. Inparticular embodiments, memory 1304 includes random access memory (RAM).This RAM may be volatile memory, where appropriate. Where appropriate,this RAM may be dynamic RAM (DRAM) or static RAM (SRAM). Moreover, whereappropriate, this RAM may be single-ported or multi-ported RAM. Thisdisclosure contemplates any suitable RAM. Memory 1304 may include one ormore memories 1304, where appropriate. Although this disclosuredescribes and illustrates particular memory, this disclosurecontemplates any suitable memory.

In particular embodiments, storage 1306 includes mass storage for dataor instructions. As an example and not by way of limitation, storage1306 may include a hard disk drive (HDD), a floppy disk drive, flashmemory, an optical disc, a magneto-optical disc, magnetic tape, or aUniversal Serial Bus (USB) drive or a combination of two or more ofthese. Storage 1306 may include removable or non-removable (or fixed)media, where appropriate. Storage 1306 may be internal or external tocomputer system 1300, where appropriate. In particular embodiments,storage 1306 is non-volatile, solid-state memory. In particularembodiments, storage 1306 includes read-only memory (ROM). Whereappropriate, this ROM may be mask-programmed ROM, programmable ROM(PROM), erasable PROM (EPROM), electrically erasable PROM (EEPROM),electrically alterable ROM (EAROM), or flash memory or a combination oftwo or more of these. This disclosure contemplates mass storage 1306taking any suitable physical form. Storage 1306 may include one or morestorage control units facilitating communication between processor 1302and storage 1306, where appropriate. Where appropriate, storage 1306 mayinclude one or more storages 1306. Although this disclosure describesand illustrates particular storage, this disclosure contemplates anysuitable storage.

In particular embodiments, I/O interface 1308 includes hardware,software, or both, providing one or more interfaces for communicationbetween computer system 1300 and one or more I/O devices. Computersystem 1300 may include one or more of these I/O devices, whereappropriate. One or more of these I/O devices may enable communicationbetween a person and computer system 1300. As an example and not by wayof limitation, an I/O device may include a keyboard, keypad, microphone,monitor, mouse, printer, scanner, speaker, still camera, stylus, tablet,touch screen, trackball, video camera, another suitable I/O device or acombination of two or more of these. An I/O device may include one ormore sensors. This disclosure contemplates any suitable I/O devices andany suitable I/O interfaces 1308 for them. Where appropriate, I/Ointerface 1308 may include one or more device or software driversenabling processor 1302 to drive one or more of these I/O devices. I/Ointerface 1308 may include one or more I/O interfaces 1308, whereappropriate. Although this disclosure describes and illustrates aparticular I/O interface, this disclosure contemplates any suitable I/Ointerface.

In particular embodiments, communication interface 1310 includeshardware, software, or both providing one or more interfaces forcommunication (such as, for example, packet-based communication) betweencomputer system 1300 and one or more other computer systems 1300 or oneor more networks. As an example and not by way of limitation,communication interface 1310 may include a network interface controller(NIC) or network adapter for communicating with an Ethernet or otherwire-based network or a wireless NIC (WNIC) or wireless adapter forcommunicating with a wireless network, such as a WI-FI network. Thisdisclosure contemplates any suitable network and any suitablecommunication interface 1310 for it. As an example and not by way oflimitation, computer system 1300 may communicate with an ad hoc network,a personal area network (PAN), a local area network (LAN), a wide areanetwork (WAN), a metropolitan area network (MAN), or one or moreportions of the Internet or a combination of two or more of these. Oneor more portions of one or more of these networks may be wired orwireless. As an example, computer system 1300 may communicate with awireless PAN (WPAN) (such as, for example, a BLUETOOTH WPAN), a WI-FInetwork, a WI-MAX network, a cellular telephone network (such as, forexample, a Global System for Mobile Communications (GSM) network), orother suitable wireless network or a combination of two or more ofthese. Computer system 1300 may include any suitable communicationinterface 1310 for any of these networks, where appropriate.Communication interface 1310 may include one or more communicationinterfaces 1310, where appropriate. Although this disclosure describesand illustrates a particular communication interface, this disclosurecontemplates any suitable communication interface.

In particular embodiments, bus 1312 includes hardware, software, or bothcoupling components of computer system 1300 to each other. As an exampleand not by way of limitation, bus 1312 may include an AcceleratedGraphics Port (AGP) or other graphics bus, an Enhanced Industry StandardArchitecture (EISA) bus, a front-side bus (FSB), a HYPERTRANSPORT (HT)interconnect, an Industry Standard Architecture (ISA) bus, an INFINIBANDinterconnect, a low-pin-count (LPC) bus, a memory bus, a Micro ChannelArchitecture (MCA) bus, a Peripheral Component Interconnect (PCI) bus, aPCI-Express (PCIe) bus, a serial advanced technology attachment (SATA)bus, a Video Electronics Standards Association local (VLB) bus, oranother suitable bus or a combination of two or more of these. Bus 1312may include one or more buses 1312, where appropriate. Although thisdisclosure describes and illustrates a particular bus, this disclosurecontemplates any suitable bus or interconnect.

Herein, a computer-readable non-transitory storage medium or media mayinclude one or more semiconductor-based or other integrated circuits(ICs) (such, as for example, field-programmable gate arrays (FPGAs) orapplication-specific ICs (ASICs)), hard disk drives (HDDs), hybrid harddrives (HHDs), optical discs, optical disc drives (ODDs),magneto-optical discs, magneto-optical drives, floppy diskettes, floppydisk drives (FDDs), magnetic tapes, solid-state drives (SSDs),RAM-drives, SECURE DIGITAL cards or drives, any other suitablecomputer-readable non-transitory storage media, or any suitablecombination of two or more of these, where appropriate. Acomputer-readable non-transitory storage medium may be volatile,non-volatile, or a combination of volatile and non-volatile, whereappropriate.

Herein, “or” is inclusive and not exclusive, unless expressly indicatedotherwise or indicated otherwise by context. Therefore, herein, “A or B”means “A, B, or both,” unless expressly indicated otherwise or indicatedotherwise by context. Moreover, “and” is both joint and several, unlessexpressly indicated otherwise or indicated otherwise by context.Therefore, herein, “A and B” means “A and B, jointly or severally,”unless expressly indicated otherwise or indicated otherwise by context.

The scope of this disclosure encompasses all changes, substitutions,variations, alterations, and modifications to the example embodimentsdescribed or illustrated herein that a person having ordinary skill inthe art would comprehend. The scope of this disclosure is not limited tothe example embodiments described or illustrated herein. Moreover,although this disclosure describes and illustrates respectiveembodiments herein as including particular components, elements,feature, functions, operations, or steps, any of these embodiments mayinclude any combination or permutation of any of the components,elements, features, functions, operations, or steps described orillustrated anywhere herein that a person having ordinary skill in theart would comprehend. Furthermore, reference in the appended claims toan apparatus or system or a component of an apparatus or system beingadapted to, arranged to, capable of, configured to, enabled to, operableto, or operative to perform a particular function encompasses thatapparatus, system, component, whether or not it or that particularfunction is activated, turned on, or unlocked, as long as thatapparatus, system, or component is so adapted, arranged, capable,configured, enabled, operable, or operative. Additionally, although thisdisclosure describes or illustrates particular embodiments as providingparticular advantages, particular embodiments may provide none, some, orall of these advantages.

What is claimed is:
 1. A method comprising: by a computing devicerunning an augmented-reality design editor for designingaugmented-reality effects, receiving one or more inputs from a user ofthe augmented-reality design editor through a graphical user interfaceof the augmented-reality design editor; by the computing device,associating a first visual object with a first rendering order specifiedby the one or more inputs of the user through the graphical userinterface, the first visual object being defined in a three-dimensionalspace; by the computing device, associating a second visual object witha second rendering order specified by the one or more inputs of the userthrough the graphical user interface, the second visual object beingdefined in the three-dimensional space; by the computing device,displaying a preview of an augmented-reality effect by rendering thefirst and second visual objects according to the first and secondrendering orders specified by the user in real-time through thegraphical user interface of the augmented-reality design editor, whereinthe augmented-reality effect is displayed in at least two differentviews on the graphical user interface of the augmented-reality designeditor; and by the computing device, storing information associated withthe first visual object, the first rendering order, the second visualobject, and the second rendering order in one or more files.
 2. Themethod of claim 1, wherein the first visual object is positioned in thethree-dimensional space closer to a display plane of a scene relative tothe second visual object; and wherein the first visual object isconfigured to be rendered prior to the rendering of the second visualobject based on a relative order between the first rendering order andthe second rendering order.
 3. The method of claim 1, wherein the firstvisual object is positioned in the three-dimensional space closer to adisplay plane of a scene relative to the second visual object; andwherein the second visual object is configured to be rendered prior tothe rendering of the first visual object based on a relative orderbetween the second rendering order and the first rendering order.
 4. Themethod of claim 1, further comprising: by the computing device,associating a third visual object with the first rendering orderspecified by the user, the third visual object being defined in thethree-dimensional space; and by the computing device, storinginformation associated with the third visual object in the one or morefiles; wherein the one or more files are configured to cause the firstvisual object and the third visual object to be rendered sequentially inan order determined based on relative positions of the first visualobject and the third visual object in the three-dimensional space. 5.The method of claim 1, further comprising: by the computing device andin response to the received one or more inputs from the user through thegraphical user interface, changing a rendering order associated with thefirst visual object from the first rendering order to a third renderingorder responsive to the received one or more inputs through thegraphical user interface.
 6. The method of claim 1, further comprising:by the computing device, displaying an ordered list of entries, each ofwhich representing a visual object defined in the three-dimensionalspace; wherein relative positions of the entries in the ordered listrepresent relative rendering orders.
 7. The method of claim 1, furthercomprising: by the computing device, associating the first virtualobject with an opaque property selected by the user; and by thecomputing device, storing information associated with the opaqueproperty in the one or more files; wherein the one or more files areconfigured to cause a rendering process of the first virtual object toenable reading from a depth buffer and enable writing to the depthbuffer.
 8. The method of claim 1, further comprising: by the computingdevice, associating the first virtual object with a transparent propertyselected by the user; and by the computing device, storing informationassociated with the transparent property in the one or more files;wherein the one or more files are configured to cause a renderingprocess of the first virtual object to enable reading from a depthbuffer and disable writing to the depth buffer.
 9. The method of claim1, further comprising: by the computing device, associating the firstvirtual object with an overlay property selected by the user; and by thecomputing device, storing information associated with the overlayproperty in the one or more files; wherein the one or more files areconfigured to cause a rendering process of the first virtual object todisable reading from a depth buffer and enable writing to the depthbuffer.
 10. The method of claim 1, further comprising: by the computingdevice, associating the first virtual object with a cutout propertyselected by the user; and by the computing device, storing informationassociated with the cutout property in the one or more files; whereinthe one or more files are configured to cause a rendering process of thefirst virtual object to disable reading from a depth buffer and disablewriting to the depth buffer.
 11. The method of claim 1, furthercomprising: by the computing device, displaying the graphical userinterface associated with the first virtual object, the graphical userinterface comprising one or more selectable properties, selected from anopaque property, a transparent property, an overlay property, or acutout property; and by the computing device, associating the firstvirtual object with one of the selectable properties selected by theuser.
 12. The method of claim 1, wherein a scene in thethree-dimensional space is combined with a second scene captured by acamera.
 13. One or more computer-readable non-transitory storage mediaembodying software that is operable when executed to: receive one ormore inputs of a user of an augmented-reality design editor fordesigning augmented-reality effects through a graphical user interfaceof the augmented-reality design editor; associate a first visual objectwith a first rendering order specified by the one or more inputs of theuser through the graphical user interface, the first visual object beingdefined in a three-dimensional space; associate a second visual objectwith a second rendering order specified by the one or more inputs of theuser through the graphical user interface, the second visual objectbeing defined in the three-dimensional space; display a preview of anaugmented-reality effect by rendering the first and second visualobjects according to the first and second rendering orders specified bythe user in real-time through the graphical user interface of theaugmented-reality design editor, wherein the augmented-reality effect isdisplayed in at least two different views on the graphical userinterface of the augmented-reality design editor; and store informationassociated with the first visual object, the first rendering order, thesecond visual object, and the second rendering order in one or morefiles.
 14. The media of claim 13, wherein the first visual object ispositioned in the three-dimensional space closer to a display plane of ascene relative to the second visual object; and wherein the secondvisual object is configured to be rendered prior to the rendering of thefirst visual object based on a relative order between the secondrendering order and the first rendering order.
 15. The media of claim13, wherein the software is further operable when executed to: associatea third visual object with the first rendering order specified by theuser, the third visual object being defined in the three-dimensionalspace; and store information associated with the third visual object inthe one or more files; wherein the one or more files are configured tocause the first visual object and the third visual object to be renderedsequentially in an order determined based on relative positions of thefirst visual object and the third visual object in the three-dimensionalspace.
 16. The media of claim 13, wherein the software is furtheroperable when executed to: display the graphical user interfaceassociated with the first virtual object, the graphical user interfacecomprising one or more selectable properties, selected from an opaqueproperty, a transparent property, an overlay property, or a cutoutproperty; associate the first virtual object with one of the selectableproperties selected by the user; and store information associated withthe selectable property associated with the first virtual object in theone or more files; wherein the one or more files are configured to causea rendering process of the first virtual object to, based on theselectable property associated with the first virtual object, enable ordisable reading from a depth buffer and enable or disable writing to thedepth buffer.
 17. A system comprising: one or more processors; and amemory coupled to the processors comprising instructions executable bythe processors, the processors being operable when executing theinstructions to: receive one or more inputs of a user of anaugmented-reality design editor for designing augmented-reality effectsthrough a graphical user interface of the augmented-reality designeditor; associate a first visual object with a first rendering orderspecified by the one or more inputs of the user through the graphicaluser interface, the first visual object being defined in athree-dimensional space; associate a second visual object with a secondrendering order specified by the one or more inputs of the user throughthe graphical user interface, the second visual object being defined inthe three-dimensional space; display a preview of an augmented-realityeffect by rendering the first and second visual objects according to thefirst and second rendering orders specified by the user in real-timethrough the graphical user interface of the augmented-reality designeditor, wherein the augmented-reality effect is displayed in at leasttwo different views on the graphical user interface of theaugmented-reality design editor; and store information associated withthe first visual object, the first rendering order, the second visualobject, and the second rendering order in one or more files.
 18. Thesystem of claim 17, wherein the first visual object is positioned in thethree-dimensional space closer to a display plane of a scene relative tothe second visual object; and wherein the second visual object isconfigured to be rendered prior to the rendering of the first visualobject based on a relative order between the second rendering order andthe first rendering order.
 19. The system of claim 17, wherein theprocessors are further operable when executing the instructions to:associate a third visual object with the first rendering order specifiedby the user, the third visual object being defined in thethree-dimensional space; and store information associated with the thirdvisual object in the one or more files; wherein the one or more filesare configured to cause the first visual object and the third visualobject to be rendered sequentially in an order determined based onrelative positions of the first visual object and the third visualobject in the three-dimensional space.
 20. The system of claim 17,wherein the processors are further operable when executing theinstructions to: display the graphical user interface associated withthe first virtual object, the graphical user interface comprising one ormore selectable properties, selected from an opaque property, atransparent property, an overlay property, or a cutout property;associate the first virtual object with one of the selectable propertiesselected by the user; and store information associated with theselectable property associated with the first virtual object in the oneor more files; wherein the one or more files are configured to cause arendering process of the first virtual object to, based on theselectable property associated with the first virtual object, enable ordisable reading from a depth buffer and enable or disable writing to thedepth buffer.